<html>
        <head>
            <title>000</title>
            <meta charset="utf-8">
            <style>
                html, body{
                    margin: 0;
                    padding: 10px;
                    background-color: aqua;
                    display: flex;
                    flex-wrap: wrap;
                }
                h3{
                    width: 100%;
                }
                .box{
                    width: 150px;
                    height: 150px;
                    margin: 50px;
                    display: inline-block;
                    box-sizing: border-box;
                }
                /*半透明边框*/
                #c_1_1{
                    border: 20px solid rgba(100, 100, 100, 0.5);
                    background-color: #f00;
                }
                #c_1_2{
                    border: 20px solid rgba(100, 100, 100, 0.5);
                    background-color: #f00;
                    background-clip: padding-box;
                }
                /*多重边框*/
                #c_2_1{
                    box-shadow: 0px 0px 0px 5px red,  0px 0px 0px 10px yellow,  0px 0px 0px 15px red ;
                }
                #c_2_2{
                    border: 5px solid red;
                    outline:  5px solid yellow;
                }
                #c_2_3{
                    outline:  2px dashed white;
                    outline-offset: -15px;
                    padding: 20px;
                    background-color: black;
                    border-radius: 10px;
                    color: white;
                }
                #c_2_4{
                    outline:  15px dotted aqua;
                    outline-offset: -7px;
                    padding: 20px;
                    background-color: black;
                    border-radius: 10px;
                    color: white;
                }
                /*灵活的背景定位*/
                #c_3_1{
                    background-color: cadetblue;
                    background-image: url(./img/用户.png);
                    background-size: 30px 30px;
                    background-repeat: no-repeat;

                    background-position: 100% 100%;
                }
                #c_3_2{
                    background-color: cadetblue;
                    background-image: url(./img/用户.png);
                    background-size: 30px 30px;
                    background-repeat: no-repeat;

                    background-position: right 10px bottom 10px;
                }
                #c_3_3{
                    background-color: cadetblue;
                    background-image: url(./img/用户.png);
                    background-size: 30px 30px;
                    background-repeat: no-repeat;

                    background-position: right  bottom ;
                    background-origin: content-box;
                    padding: 10px;
                }
                #c_3_4{
                    background-color: cadetblue;
                    background-image: url(./img/用户.png);
                    background-size: 30px 30px;
                    background-repeat: no-repeat;
                    word-break: break-all;
                    color: #f00;

                    background-position: calc(100% - 10px) calc(100% - 10px) ;
                }
                /*边框内圆角*/
                #c_4_1{
                    background-color: tan;
                    border-radius: 15px;
                    outline: 20px yellowgreen solid;
                    box-shadow: 0 0 0 10px yellowgreen;
                }
                #c_4_2{
                    background-color: tan;
                    border-radius: 25px;
                    border: 10px solid red;
                    outline: 20px red solid;
                    outline-offset: -10px;
                }
                /*条纹背景*/
                #c_5_1{
                    background: linear-gradient(#fb3 33%, #58a 0, #58a 66%, yellowgreen 0);
                    background-size: 100% 30px;
                }
                #c_5_2{
                    background: linear-gradient(90deg, #fb3 33%, #58a 0, #58a 66%, yellowgreen 0);
                    background-size: 30px 100%;
                }
                #c_5_3{
                    background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);
                    background-size: 50px 50px;
                }
                #c_5_4{
                    background: repeating-linear-gradient(75deg, #fb3 0, #fb3 5%, #58a 0, #58a 10%);
                }
                #c_5_5{
                    background-color: #58c;
                    background-image: repeating-linear-gradient(75deg, rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.2) 5%, transparent 0, transparent 10%);
                }

                /*复杂的背景图案*/
                #c_6_1{
                    background-image: linear-gradient(180deg, rgba(100, 100, 200, .50) 50%, transparent 0), linear-gradient(90deg, rgba(100, 100, 200, .50) 50%, transparent 0);
                    background-size: 30px 30px;
                }
                #c_6_2{
                    background-image: linear-gradient(180deg, rgba(100, 100, 200, .50) 1px, transparent 0), linear-gradient(90deg, rgba(100, 100, 200, .50) 1px, transparent 0),
                                      linear-gradient(180deg, rgba(200, 0, 0, .50) 5px, transparent 0), linear-gradient(90deg, rgba(200, 0, 0, .50) 5px, transparent 0);
                    background-size: 10px 10px,10px 10px,50px 50px,50px 50px;
                }
                #c_6_3{
                    background-image: radial-gradient(black 30%, transparent 0);
                    background-size: 30px 30px;
                }
                #c_6_4{
                    background-image: radial-gradient(black 15%, transparent 0),radial-gradient(black 15%, transparent 0);
                    background-size: 30px 30px;
                    background-position: 0 0, 15px 15px;
                }
                #c_6_5{
                    background-image: linear-gradient(45deg, tan 25%, transparent 0, transparent 75%, tan 0), linear-gradient(45deg, tan 25%, transparent 0, transparent 75%, tan 0);
                    background-size: 30px 30px;
                    background-position: 0 0, 15px 15px;
                }

                /*连续的边框*/
                @keyframes heightChange{
                    0%{
                        height: 80px;
                    }
                    50%{
                        height: 150px;
                    }
                    100%{
                        height: 80px;
                    }
                }
                #c_8_1{
                    background-image: url(./img/bg1.jpg);
                    background-size: cover;
                    background-repeat: no-repeat;
                    animation: heightChange 3s infinite;
                }
                #c_8_1 div{
                    background-color: white;
                    box-sizing: border-box;
                    height: 100%;
                    padding: 20px;
                    background-clip: content-box;
                }
                #c_8_2{
                    background-image: linear-gradient(white 0, white 100%) , url(./img/bg1.jpg);
                    background-size: cover;
                    background-clip: content-box, border-box;
                    background-repeat: no-repeat;
                    animation: heightChange 3s infinite;
                    padding: 20px;
                }
                #c_8_3{
                    background-image: linear-gradient(white 0, white 100%) , repeating-linear-gradient(45deg, tan 0, tan 10px, white 10px, white 20px, red 20px, red 30px, white 30px, white 40px);
                    background-size: cover;
                    background-clip: content-box, border-box;
                    animation: heightChange 3s infinite;
                    padding: 10px;
                }
                @keyframes pschange{
                    to{
                        background-position: 0% 100%;
                    }
                }
                #c_8_4{
                    background-image: linear-gradient(white 0, white 100%) , repeating-linear-gradient(45deg, tan 0, tan 25%, white 0, white 50%);
                    background-size: cover, 8px 8px;
                    background-clip: content-box, border-box;
                    animation: pschange 4s linear infinite;
                    padding: 1px;
                }

                @keyframes pschange1{
                    50%{
                    	background-image: linear-gradient(white 0, white 100%) , conic-gradient(white 25%, black 0, black 50%, white 0, white 75%, black 0, black 100%);
                    }
                }
                #c_8_6{
                    background-image: linear-gradient(white 0, white 100%) , conic-gradient(black 25%, white 0, white 50%, black 0, black 75%, white 0, white 100%);
                    background-size: cover, 8px 8px;
					background-repeat: round, round;
                    background-clip: content-box, border-box;
                    animation: pschange1 0.2s linear infinite;
                    padding: 1px;
                }
                @keyframes widthChange{
                    to{
                        padding-left: 100px;
                        color: tan;
                    }
                }
                #c_8_5 span{
                    padding-left: 5px;
                    color: black;
                    border-image:linear-gradient(90deg, currentColor 50%, transparent 0) 100% 0 0 0;
                    border-top: 5px solid transparent;
                    white-space: nowrap;
                    animation: widthChange 3s infinite;
                    overflow: hidden;
                }

                /*椭圆*/
                @keyframes widthChange1{
                    0%{width: 200px}
                    50%{width: 400px}
                    100%{width: 200px}
                }
                #c_9_1{
                    width: 400px;
                    background-color: blueviolet;
                    border-radius: 50%;
                    animation: widthChange1 2s linear infinite;
                }
                #c_9_2{
                    background-color: blueviolet;
                    border-radius: 50% 50% / 100% 100% 0 0;
                }
                #c_9_3{
                    width: 300px;
                    background-color: blueviolet;
                    border-radius: 100% 0 0 100% / 100% 100% 0 0;
                }
                #c_9_4{
                    background-color: rgba(250, 194, 135, 0.9);
                    background-image: linear-gradient(rgba(248, 232, 215, 0.9) 0, rgba(247, 164, 75, 0.9) 90%);
                    border-radius: 15px 15px 50% 50% / 15px 15px 100% 100%;
                    box-shadow: 0 10px 2px rgba(173, 132, 77, 1), 0 15px 5px rgba(0, 0, 0, 0.3),
                        0 -10px 5px 10px rgba(173, 132, 77, 0.2) inset;
                }
                #c_9_5{
                    width: 300px;
                    height: 100px;
                    background-color: rgba(241, 150, 214, 1);
                    border-radius: 110px 10px / 100% 10px;

                    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(245, 159, 213, 0.2) 50%) ,
                                        linear-gradient(165deg, rgba(255, 255, 255, 0.9), rgba(245, 159, 213, 0.9) 80%);

                    box-shadow: 0 10px 0px rgba(196, 84, 162, 0.6),
                                0 15px 10px rgba(0, 0, 0, 0.5),
                                5px -5px 2px 10px rgba(248, 132, 206, 0.2) inset;
                }
            </style>
        </head>
    
        <body>
            <h3>1 半透明边框</h3>
            <div id="c_1_1" class="box">边框下面包含背景色</div>
            <div id="c_1_2" class="box">background-clip设置背景范围</div>

            <h3>2 多重边框</h3>
            <div id="c_2_1" class="box">box-shadow, 扩张半径</div>
            <div id="c_2_2" class="box">两层边框，outline</div>
            <div id="c_2_3" class="box">outline, outline-offset 边缝</div>
            <div id="c_2_4" class="box">outline, outline-offset 邮票</div>
            
            <h3>3 灵活的背景定位：指定右下角距离</h3>
            <div id="c_3_1" class="box">background-position: 100% 100%;</div>
            <div id="c_3_2" class="box">CSS#拓展： background-position: right 10px bottom 10px;</div>
            <div id="c_3_3" class="box">距离等于内边距，background-origin: content-box;</div>
            <div id="c_3_4" class="box">calc(100% - 10px) 注意这里的百分比得到的不是直接的div宽度，而是采用background-position的语义计算出来的确定值</div>
       
            <h3>4 边框内圆角</h3>
            <div id="c_4_1" class="box">box-shadow + outline</div>
            <div id="c_4_2" class="box">border + outline-offset</div>

            <h3>5 条纹背景 repeating-linear-gradient, linear-gradient</h3>
            <div id="c_5_1" class="box"></div>
            <div id="c_5_2" class="box"></div>
            <div id="c_5_3" class="box"></div>
            <div id="c_5_4" class="box"></div>
            <div id="c_5_5" class="box"></div>

            <h3>6 复杂的背景图案</h3>
            <div id="c_6_1" class="box"></div>
            <div id="c_6_2" class="box"></div>
            <div id="c_6_3" class="box"></div>
            <div id="c_6_4" class="box" style="color: red">使用background-position错开两个背景</div>
            <div id="c_6_5" class="box" style="color: red">使用background-position错开两个背景</div>

            <h3>8 连续的图像边框</h3>
            <div id="c_8_1" class="box"><div>使用两个元素嵌套</div></div>
            <div id="c_8_2" class="box">一个元素，双重背景</div>
            <div id="c_8_3" class="box">双重背景，信封效果</div>
            <div id="c_8_4" class="box">双重背景，蚂蚁行军</div>
            <div id="c_8_6" class="box">conic-gradient, 蚂蚁行军</div>
            <div id="c_8_5" class="box">@<span>需要设置边框，border-image才生效: 50%边框</span></div>

            <h3>9 椭圆</h3>
            <div id="c_9_2" class="box"></div>
            <div id="c_9_3" class="box">border-radius顺序<p>1, 2</p><p>4, 3</p></div>
            <div id="c_9_4" class="box"></div>
            <div id="c_9_5" class="box"></div>
            <div id="c_9_1" class="box"></div>

        </body>
    </html>